<template>
  <div class="navbar">
    <div class="icon">
      <el-icon :size="20" @click="fnFlag">
        <Fold v-if="flag" />
        <Expand v-else />
      </el-icon>
    </div>
    <el-breadcrumb class="breadContainer" separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item
          class="item"
          v-for="(item, index) in arrRoute"
          :key="index"
          >
          <template v-if="index == 0">{{ item?.title }}</template>
          <a v-else :href="item.path">{{ item?.title }}</a>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
    <div class="drop">
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ name }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="fnLoginout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { onMounted, watch, ref, computed } from 'vue'
import { postData } from "./../../http/request.js";
import { useRouter,useRoute } from "vue-router";
import { useStore } from 'vuex'

const emit = defineEmits(['changeMenu'])
const arrRoute = ref([])
const flag = ref(true)

let router = useRouter();
let route = useRoute();
let store = useStore()

let name = computed(() => {
  return localStorage.getItem('username')
})

const initRoute = () => {
  arrRoute.value = []
  let matched = route.matched
  if (matched.length > 0) {
    for (let i = 0; i < matched.length; i++) {
      let obj = {
        title: matched[i].meta.title,
        path: matched[i].path
      }
      arrRoute.value.push(obj)
    }
  }
}

onMounted(() => {
  initRoute()
})

watch(
  () => route.path,
  () => {
    initRoute()
  }
)

const fnFlag = () => {
  flag.value = !flag.value
  emit('changeMenu', flag.value)
}

const fnLoginout = () => {
  postData('/adminweb/sys/admin/logout')
    .then((res) => {
      localStorage.clear()
      sessionStorage.clear()
      if (res.code == 0) {
        localStorage.removeItem('username')
        localStorage.removeItem('token')
       // this.$store.commit('login/setUser', '')
        // let host_login_url =
        //   window.location.protocol + '//' + window.location.host + '/#/login'
        // let global_login_url = window.loginUrl
        // window.location.href =
        //   global_login_url == '' ? host_login_url : global_login_url
        router.push("/login");
      } else if (res.code == -56055) {
        return
      } else {
        this.$message.error(res.code + '，' + res.msg)
      }
    })
    .catch((res) => {
      this.$message.error(res.code + '，' + res.msg)
    })
}

defineExpose({
  arrRoute,
})
</script>

<style scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  background: #fff;
  -webkit-box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}
.icon {
  padding: 0 15px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.breadContainer {
  transition: background 0.3s;
  -webkit-tap-highlight-color: transparent;
  height: 50px;
  display: flex;
  align-items: center;
}
.breadContainer:hover {
  background: rgba(0, 0, 0, 0.025);
}
.drop {
  position: absolute;
  right: 40px;
  top: 0;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dropdown-link {
  cursor: pointer;
  color: #606266;
  height: 50px;
  display: flex;
  align-items: center;
}
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all 0.5s;
}

.breadcrumb-leave-active {
  position: absolute;
}
</style>
<style>
.el-main {
  box-sizing: border-box;
}
.el-breadcrumb__inner a{
  cursor: pointer !important;
}
.el-breadcrumb__inner a:hover{
  color: #409eff !important;
}
</style>
